<template>
	<view class="listview">
		<view style="height: 25vh;width: 750rpx;" v-if="!fixed"></view>
		<view style="background-color: #121325;" :style="{
				height: fixed ? '100vh' : '75vh'
			  }">
			<z-paging ref="paging" :fixed="fixed" bg-color="#121325" v-model="indexList"  id="pagingChat"
				use-chat-record-mode hide-empty-view  :safe-area-inset-bottom="false" auto-show-back-to-top
				@query="queryList" default-page-size='20' @hidedKeyboard="hidedKeyboard" @showBackToTop="onShowBackToTop">
				<template #top>
					<cl-navbar leftIconSize="40rpx" autoBack placeholder v-if="fixed"
						rightIcon='/static/icon/gengduo.svg' @rightClick="godetails" :isbgColor="false">
						<view class="navtitleview" slot="center">
							<view style="display: flex;align-items: center;">
								<text class="u-line-1" style="max-width: 450rpx;">{{chatInfo && chatInfo.nickname}}</text>
								<text
									v-if="chatInfo && chatInfo.user_type && chatInfo.user_type > 0 && chatInfo.user_type != 6 && chatInfo.user_type != 8"
									class="typetag"
									style="background-color: #02D478;">{{$t('common.friend.authority')}}</text>
							</view>

							<view class="">
								<text style="font-size: 26rpx;color: #61626e;" v-if="getLastIpStr">{{getLastIpStr}}•</text>
								<text style="font-size: 26rpx;color:#6aaf76;" v-if="friendOnline[chatInfo.uuid]">{{$t("common.friend.online")}}</text>
								<text v-else style="font-size: 26rpx;color: #61626e;">{{$t("common.friend.offline")}}</text>
							</view>
						</view>
					</cl-navbar>
					<view
						style="width: 750rpx;height: 120rpx;background: #0C0D1A;border-radius: 20rpx 20rpx 0rpx 0rpx;display: flex;justify-content: space-between;align-items: center;"
						v-else>
						<view style="padding: 0 13px;" @click="$Router.back()">
							<image src="/static/icon/fanhuiguanbi.svg" alt="" style="width: 40rpx;height: 40rpx;" />
						</view>
						<text style="font-size: 15px;">{{chatInfo && chatInfo.nickname}}</text>
						<view style="padding: 0 13px;" @click="fangda">
							<image src="/static/icon/kuozhan.svg" alt="" style="width: 40rpx;height: 40rpx;" />
						</view>
					</view>
					<view style="background-color: rgba(162, 162, 171, 0.1);display: flex;align-items: center;padding: 20rpx;box-sizing: border-box;line-height: 1.2;" v-if="showTop && chatTopMsg" @click="goMsgTop('msg_top')">
						<view style="background-color: #2979ff;height: 68rpx;width: 6rpx;"></view>
						<view style="display: flex;flex: 1;" v-if="chatTopMsg.msg_type == 'text'">
							<view style="margin:0 10rpx;width: 0;flex: 1;">
								<text style="color: #2979ff;">置顶消息</text>
								<view class="u-line-1">
									<rich-text :nodes="chatTopMsg.content_text && chatTopMsg.content_text.length &&replaceEmojis(chatTopMsg.content_text[0].text.content)" :selectable="false" 
										style="-webkit-touch-callout: none;white-space: pre-wrap;overflow-wrap: break-word;color:#dddddd"></rich-text>
								</view>
							</view>
						</view>
						<view style="display: flex;flex: 1;align-items: center;" v-else-if="chatTopMsg.msg_type == 'audio'">
							<view style="margin:0 10rpx;width: 0;flex: 1;">
								<text style="color: #2979ff;">置顶消息</text>
								<view class="u-line-1">
									语音
								</view>
							</view>
						</view>
						<view style="display: flex;flex: 1;align-items: center;" v-else-if="chatTopMsg.msg_type == 'b_c'">
							<view style="margin:0 10rpx;width: 0;flex: 1;">
								<text style="color: #2979ff;">置顶消息</text>
								<view class="u-line-1">
									名片
								</view>
							</view>
						</view>
						<view style="display: flex;flex: 1;align-items: center;margin:0 10rpx;" v-else>
							<view style="width: 68rpx;height: 68rpx;margin-right: 5rpx;" v-if="mediaAttachments(chatTopMsg).url">
								<cl-chat-image :key="mediaAttachments(chatTopMsg).url" :srckey="mediaAttachments(chatTopMsg).url" :imageStyle="{width: '68rpx',height:'68rpx'}" :noclick="true" ></cl-chat-image>
							</view>
							<view style="width: 0;flex: 1;">
								<text style="color: #2979ff;">置顶消息</text>
								<view class="" class="u-line-1" v-if="mediaAttachments(chatTopMsg).text">
									<rich-text :nodes="mediaAttachments(chatTopMsg).text" :selectable="false"
										style="-webkit-touch-callout: none;white-space: pre-wrap;overflow-wrap: break-word;color:#dddddd"></rich-text>
								</view>
							</view>
						</view>
						<u-icon name="close" color="#fff" size="18px" @click="showTop = false"></u-icon>
					</view>
				</template>

				<!-- style="transform: scaleY(-1)"必须写，否则会导致列表倒置！！！ -->
				<view v-for="(item,index) in indexList" :key="'sl'+item.msg_id" style="transform: scaleY(-1)">
					<!-- <view v-if="index === indexList.length - 1 || (index < indexList.length - 1 && compareTimeInterval(item.create_time,indexList[index + 1].create_time))" class="listview__timeview"> -->
					<!-- <view class="listview__timeview">
						<text class="listview__timeview__time">{{formatSendTime(item.create_time)}}</text>
					</view> -->
					<chat-item :item="item" @long="long" :msgindex="item.id"  @clickRed="clickRed"
						:multipleChoice="multipleChoice" @repeater="repeater" :key="item.msg_id"></chat-item>
				</view>

				<!-- 底部聊天输入框 -->
				<template #bottom>
					<view v-show="multipleChoice.select"
						style="display: flex;align-items: center;height: 100rpx;background-color: #0c0d1a;justify-content: space-around;">
						<view class="" @click="batchControls('delete')">
							<image src="/static/icon/shanchu.svg" style="width: 40rpx;height: 40rpx;"></image>
						</view>
						<view class="" @click="batchControls('share')">
							<image src="/static/icon/zhuanfa.svg" style="width: 35rpx;height: 35rpx;"></image>
						</view>
						<view class="" @click="multipleChoice.select = false">
							<image src="/static/icon/quxiao.svg" style="width: 40rpx;height: 40rpx;"></image>
						</view>
					</view>
					<view class="editMsgview" v-if="editMsgData">
						<view style="flex: 1;margin-right: 20rpx;">
							<view class="editMsgview__title">{{$t("chat.msg.type.editmsg")}}</view>
							<view style="display: flex;flex-direction: row;width: 100%;">
								<text style="color:#a2a2a2;font-size: 24rpx;white-space: nowrap;" v-if="editMsgData.msg_type == 'mixed'">[{{$t("chat.msg.type.mixed")}}]</text>
								<rich-text :nodes="messageText(getTextContent(editMsgData.content_text))" :selectable="false" style="color:#a2a2a2;font-size: 24rpx;" class="u-line-1"></rich-text>
							</view>
						</view>
						<u-icon
						    name="close"
						    size="16"
						    color="#a2a2a2"
							@click="closeMsg"
						></u-icon>
					</view>
					<view class="editMsgview" v-if="referenceData">
						<view style="flex: 1;margin-right: 20rpx;">
							<view style="display: flex;flex: 1;" v-if="referenceData.msg_type == 'text'">
								<view style="width: 0;flex: 1;">
									<text style="color: #1c93cf;font-size: 26rpx;">引用:{{referenceData.sender_id == user_info.user_id ? user_info.nick_name : chatInfo.nickname  }}</text>
									<view class="u-line-1">
										<rich-text :nodes="referenceData.content_text && referenceData.content_text.length &&replaceEmojis(referenceData.content_text[0].text.content)" :selectable="false" 
											style="-webkit-touch-callout: none;white-space: pre-wrap;overflow-wrap: break-word;color:#a2a2a2;font-size: 24rpx;"></rich-text>
									</view>
								</view>
							</view>
							<view style="display: flex;flex: 1;align-items: center;" v-else-if="referenceData.msg_type == 'audio'">
								<view style="width: 0;flex: 1;">
									<text style="color: #1c93cf;font-size: 26rpx;">引用:{{referenceData.sender_id == user_info.user_id ? user_info.nick_name : chatInfo.nickname  }}</text>
									<view class="u-line-1" style="color:#a2a2a2;font-size: 24rpx;">
										语音
									</view>
								</view>
							</view>
							<view style="display: flex;flex: 1;align-items: center;" v-else-if="referenceData.msg_type == 'b_c'">
								<view style="width: 0;flex: 1;">
									<text style="color: #1c93cf;font-size: 26rpx;">引用:{{referenceData.sender_id == user_info.user_id ? user_info.nick_name : chatInfo.nickname  }}</text>
									<view class="u-line-1" style="color:#a2a2a2;font-size: 24rpx;">
										名片
									</view>
								</view>
							</view>
							<view style="display: flex;flex: 1;align-items: center;" v-else>
								<view style="width: 68rpx;height: 68rpx;margin-right: 5rpx;" v-if="mediaAttachments(referenceData).url">
									<cl-chat-image :key="mediaAttachments(referenceData).url" :srckey="mediaAttachments(referenceData).url" :imageStyle="{width: '68rpx',height:'68rpx'}" :noclick="true" ></cl-chat-image>
								</view>
								<view style="width: 0;flex: 1;">
									<text style="color: #1c93cf;font-size: 26rpx;">引用:{{referenceData.sender_id == user_info.user_id ? user_info.nick_name : chatInfo.nickname  }}</text>
									<view class="" class="u-line-1" v-if="mediaAttachments(referenceData).text">
										<rich-text :nodes="mediaAttachments(referenceData).text" :selectable="false"
											style="-webkit-touch-callout: none;white-space: pre-wrap;overflow-wrap: break-word;color:#a2a2a2;font-size: 24rpx;"></rich-text>
									</view>
								</view>
							</view>
						</view>
						<u-icon
						    name="close"
						    size="16"
						    color="#a2a2a2"
							@click="referenceData = null"
						></u-icon>
					</view>
					<view style="background-color: #0c0d1a;" v-show="!multipleChoice.select">
						<cl-chat-input @change="changeIn" @record="record" ref="chatinput"  @redPack="redPack" @sendDirectsend="directsend"
							@cameracall="cameracall"></cl-chat-input> 
					</view>
				</template>
				<template #backToTop>
					<view style="width: 100%;height: 100%;position: relative;">
						<image style="width: 100%;height: 100%;" src="/static/icon/gobottom.svg" />
						<u-badge type="error" :value="topMessageNum" :max="99" :customStyle="{fontSize:'20rpx'}" style="position: absolute;top: -10rpx;right: 0;"></u-badge>
					</view>
				</template>
			</z-paging>
		</view>
		<view>
			<cl-model ref="clCard">
				<view class="cardView">
					<text class="cardView__title">{{$t("chat.business_share.Sendto")}}</text>
					<view class="cardView__top">
						<cl-avatar :src="chatInfo.avatar_url" size="60rpx"></cl-avatar>
						<text class="cardView__top__name">{{chatInfo.nickname}}</text>
					</view>
					<view v-if="cardInfo" class="cardView__content">
						<text
							class="cardView__content__text u-line-1">{{cardInfo.chat_type == 'private'?'[个人名片]':cardInfo.chat_type == 'group'?'[群名片]':'[其他名片]'}}{{cardInfo.nick_name}}</text>
					</view>
				</view>
			</cl-model>

			<cl-model ref="clDelMsg">
				<view class="delView">
					<text
						class="delView__title">{{`${$t("common.deleteText")}${delJson.msg_ids.length > 1?delJson.msg_ids.length+$t("chat.page.a"):''}${$t("chat.page.message")}`}}</text>
					<text
						class="delView__content">{{`${$t("chat.page.sureDelete")}${delJson.msg_ids.length > 1?$t("chat.page.some"):$t("chat.page.a")}${$t("chat.page.amessage")}`}}</text>
					<u-checkbox-group v-model="delJson.check" v-if="getDelOtherMsg">
						<u-checkbox :label="`${$t('chat.page.SimuDel')}`" size="26rpx" labelSize="26rpx"></u-checkbox>
					</u-checkbox-group>
				</view>
			</cl-model>
			<u-popup :show="redshow" mode="center"  @close="redshow = false" :overlayStyle="{background: 'rgba(0, 0, 0, 0.3)'}" bgColor="transparent">
				<view style="position: relative;" v-if="redItem">
					<image src="/static/chat/hongbaopi.png" mode="widthFix" style="width: 500rpx;"></image>
					<image src="/static/chat/hongbaokai.png" mode="widthFix" ref="hongbaokai" :animation="openbrnanimation" style="width: 170rpx;position: absolute;bottom: 130rpx;left: 165rpx;" @click="openRed" v-if="redInfo.red_status == '0'"></image>
					<view style="display: flex;flex-direction: column;align-items: center;position: absolute;top: 100rpx;left: 30rpx;right: 30rpx;">
						<view style="display: flex;align-items: center;">
							<view>
								<cl-avatar
									:src="redItem.sender_id == user_info.user_id ? user_info && user_info.avatar_url : chatInfo && chatInfo.avatar_url"
									size="50rpx"></cl-avatar>
							</view>
							<text style="font-size: 20rpx;color: #FFB069;margin-left: 15rpx;" class="u-line-1">{{redItem.sender_id == user_info.user_id ? user_info.nick_name : chatInfo.nickname }}的红包</text>
						</view>
						<text style="font-size: 32rpx;color: #FFB069;margin-top: 20rpx;text-align: center;" class="u-line-2" v-if="redInfo.red_status == '0'">{{redItem.content_text[0].r_p.remark}}</text>
						<text style="font-size: 40rpx;color: #FFB069;margin-top: 40rpx;text-align: center;" v-if="redInfo.red_status == '1'">该红包已超过24小时。</text>
					</view>
					<image src="/static/upload/close.png" mode="" style="width: 60rpx;height: 60rpx;position: absolute;bottom: -100rpx;left: 220rpx;" @click="closeRed"></image>
				</view>
			</u-popup>
		</view>
		<!-- 长按弹窗菜单 -->
		<cl-menu-popup @tapPopup="tapPopup" ref="extendPop" />

	</view>
</template>

<script>
	import {
		v4 as uuidv4
	} from 'uuid';
	import {
		mapState
	} from 'vuex'
	import messageApi from '@/services/api/msg.js'
	import favoritesApi from '@/services/api/favorites.js'
	import msgSqlite from "@/sqlite_services/msg.js"
	import file from "@/common/tools/file.js"
	import {
		replaceEmojis
	} from '@/components/cl-chat-input/o-emoji/emoji.js';
	import {
		formatSendTime
	} from '@/common/chatMsgTime.js'
	export default {
		name:'chat',
		data() {
			return {
				fixed: true,
				showTop:true,
				delJson: {
					check: [],
					msg_ids: [],
					conversation_id: 0
				},
				title: 'Hello',
				extendBottons: [],
				editMsgData:null,
				indexList: [],
				scrollTop: 0,
				scrollViewHeight: 0,
				propItem: null, //长按选中的item
				multipleChoice: {
					select: false,
					data: []
				}, //多选data
				cardInfo: null,
				pictureRetention: [], //存储图片保留一下子，就是方大图片的那个数组
				referenceData: null, //引用的消息体
				topMessageNum:0,//浏览消息期间的未读数
				topMessageLastMsg:null,//浏览消息期间最后一条不是我的消息
				
				redshow:false,//红包打开弹窗
				openbrnanimation: {}, // 拆封动画
				redItem:null,//红包的item
				redInfo:null,//红包详情
				isChauRed:false,//是否正在拆红包
			};
		},
		computed: {
			...mapState({
				user_info: state => state.user.user_info,
				plat_info: state => state.plat.plat_info,
				chatTopMsg: state => state.chat.chatTopMsg,
				chatInfo: state => state.chat.chatInfo,
				friendOnline: state => state.friends.friendOnline,
			}),
			messageText() {
				return (text) => {
					return replaceEmojis(text)
				}
			},
			getPermission() {
				return (type) => {
					if (this.chatGroupInfo == null || this.chatGroupInfo.mygroup == '0') return false
					// 0所有人 1普通用户 2管理员 3都不允许
					if (this.chatGroupInfo[type] == '0') {
						return true
					} else if (this.chatGroupInfo[type] == '1') {
						if (this.chatGroupInfo.userRole && this.chatGroupInfo.userRole != 'manager') return true
					} else if (this.chatGroupInfo[type] == '2') {
						if (this.chatGroupInfo.userRole && this.chatGroupInfo.userRole != 'member') return true
					} else if (this.chatGroupInfo[type] == '3') {
						if (this.chatGroupInfo.userRole && this.chatGroupInfo.userRole == 'creator') return true
					}
					return false
				}
			},
			getLastIpStr(){
				const result = this.indexList.find(item => item.sender_id != this.user_info.user_id);
				if(result && result.ip_addr && this.getShowIp){
					const parts = result.ip_addr.split('-');
					return parts.length > 1 ? parts.slice(0, 2).join('-') : result.ip_addr; // 如果只有一个部分，直接返回原字符串
				}
				return ''
			},
			getDelOtherMsg(){
				if(!this.plat_info)return false
				// (0:所有人;1:普通用户;2后台用户,3都不允许)
				if (this.plat_info.del_p_msg == '0') {
					return true
				} else if (this.plat_info.del_p_msg == '1') {
					if (this.user_info.user_type == '0') return true
				} else if (this.plat_info.del_p_msg == '2') {
					if (this.user_info.user_type > 0) return true
				}
				return false
			},
			getShowIp(){
				if(!this.plat_info)return false
				// (0:所有人;1:普通用户;2后台用户,3都不允许)
				if (this.plat_info.show_ip == '0') {
					return true
				} else if (this.plat_info.show_ip == '1') {
					if (this.user_info.user_type == '0') return true
				} else if (this.plat_info.show_ip == '2') {
					if (this.user_info.user_type > 0) return true
				}
				return false
			},
		},
		onLoad() {
			
			let query = this.$Route.query

			if (query.screen) {
				this.fixed = false
			}
		
			//需要把当前聊天的信息存到全局中，这么做的目的是因为外部需要知道当前的聊天页面，如果在当前页面的时候会影响，未读数的增加
			this.$store.commit('setChatInfo', {
				uuid: query.friend_idx,
				nickname: query.nick_name,
				avatar_url: query.avatar_url,
				user_type: query.user_type,
				chat_type: 'private'
			})
			
			//同步执行里面的内容，异步与外部
			this.getChatInfo()
			//已读回执
			msgSqlite.receipt({
				chat_type: this.chatInfo.chat_type,
				uuid: this.chatInfo.uuid
			}).then(msg_id => {
				if (msg_id) {
					//更新已有的列表
					this.indexList.map(item => {
						if (item.sender_id == this.chatInfo.uuid && item.msg_id <= msg_id) {
							item.msg_status = 'read'
						}
					})
				}
			})
			//清空未读
			this.$store.dispatch('clearUnread', this.chatInfo.uuid)
			
			// 监听接收聊天信息
			uni.$on('onMessage', this.onMessage)
			// 监听操作
			uni.$on('onMessageControls', this.onMessageControls)

			// 监听 名片选择页面的返回传参 事件
			uni.$on('onCallingCard', this.onCallingCard);

			// 监听点击聊天记录定位监听
			// uni.$on('onChatHistory', this.onChatHistory)
		},
		onShow() {
			let systemInfo = uni.getSystemInfoSync();
			if (systemInfo.platform === 'android') {
				var Color = plus.android.importClass("android.graphics.Color");
				var activity = plus.android.runtimeMainActivity();
				activity.getWindow().setNavigationBarColor(Color.argb(255, 12, 13, 26));
			}

			//为了避免往下层跳转给清空放大图数组，赋值一下
			this.$store.commit('setImages', this.pictureRetention)
		},
		onHide() {
			//为了避免往下层跳转给清空放大图数组，备份一下
			this.pictureRetention = JSON.parse(JSON.stringify(this.$store.state.images.images))
			//清空别影响其他页面
			this.$store.commit('setImages', [])
		},
		onUnload() {
			this.$store.commit('setChatTopMsg', {
				data:null,
				target_id:this.chatInfo.uuid
			})
			this.$store.commit('setChatInfo', null)
			// 销毁监听接收聊天消息
			uni.$off('onMessage', this.onMessage)

			// 监听操作
			uni.$off('onMessageControls', this.onMessageControls)

			uni.$off('onCallingCard', this.onCallingCard);

			// 监听点击聊天记录定位监听
			// uni.$off('onChatHistory', this.onChatHistory)
		},
		methods: {
			replaceEmojis,
			formatSendTime,
			//去红包页面
			redPack(){
				this.$Router.push({
					name: 'redPacketSend',
					params: {
						info: this.chatInfo,
					}
				});
			},
			//点击红包
			clickRed(item){
				this.redItem = item
				let itemMsgTi = this.redItem.content_text[0].r_p
				uni.$api.chat.redPacketInfo({
					chat_type: '0',
					red_id: itemMsgTi.red_packet_id,
					msg_id: this.redItem.msg_id, //红包总金额
					target_id: itemMsgTi.target_id,
				}).then(res=>{
					if(res && res.code == 200){
						this.redInfo = res.data
						this.redItem.content_text[0].r_p = {
							...this.redItem.content_text[0].r_p,
							remaining_count:res.data.remaining_count,
							red_status:res.data.red_status,
							remaining_amount:res.data.remaining_amount
						}
						let editIndex = this.indexList.findIndex(it => it.msg_id == item.msg_id);
						if (editIndex !== -1) {
							this.$set(this.indexList[editIndex],'content_text',this.redItem.content_text)
						}
						msgSqlite.updateMessageById(this.redItem.msg_id, {
							content_text:JSON.stringify(this.redItem.content_text),
						})
						if(this.redItem.content_text[0].r_p.sender_id == this.user_info.user_id){
							this.$Router.push({
								name:'redPacketDisplay',
								params: {
									msgitem: this.redItem,
									redinfo:this.redInfo,
									chatInfo:this.chatInfo
								}
							})
							return
						}
						if(res.data.red_status == '2'){
							this.$Router.push({
								name:'redPacketDisplay',
								params: {
									msgitem: this.redItem,
									redinfo:this.redInfo,
									chatInfo:this.chatInfo
								}
							})
						}else{
							this.redshow = true
						}
					}
				})
			},
			//关闭红包弹窗
			closeRed(){
				this.resetRedPacketAnimation()
				this.redItem = null 
				this.redshow = false
				this.isChauRed = false
			},
			//打开红包
			async openRed(){
				if(this.isChauRed)return
				this.isChauRed = true
				// 创建动画对象
				var animation = uni.createAnimation({
				    duration: 10000,           // 动画时长
				    timingFunction: 'linear' // 线性旋转，保证匀速
				})
				//转10圈，1秒钟1圈
				animation.rotateY(3600).step() // 执行旋转动画
				this.openbrnanimation = animation.export() // 导出动画效果
				console.log(this.redItem);
				try{
					let itemMsgTi = this.redItem.content_text[0].r_p
					let res = await uni.$api.chat.redPacketGrab({
						chat_type: '0',
						red_id: itemMsgTi.red_packet_id,
						msg_id: this.redItem.msg_id, //红包总金额
						target_id: itemMsgTi.target_id,
					})
					if(res && res.code == 200){
						setTimeout(()=>{
							this.redItem.content_text[0].r_p = {
								...this.redItem.content_text[0].r_p,
								remaining_count:res.data.remaining_count,
								red_status:res.data.red_status,
								remaining_amount:res.data.remaining_amount
							}
							let editIndex = this.indexList.findIndex(it => it.msg_id == this.redItem.msg_id);
							if (editIndex !== -1) {
								this.$set(this.indexList[editIndex],'content_text',this.redItem.content_text)
							}
							msgSqlite.updateMessageById(this.redItem.msg_id, {
								content_text:JSON.stringify(this.redItem.content_text),
							})
							this.$Router.push({
								name:'redPacketDisplay',
								params: {
									msgitem: this.redItem,
									getinfo: res.data,
									redinfo:this.redInfo,
									chatInfo:this.chatInfo
								}
							})
							this.closeRed()
						},500)
					}else{
						this.resetRedPacketAnimation()
					}
				}catch(e){
					this.resetRedPacketAnimation()
				}
				this.isChauRed = false
			},
			// 重置动画的方法
			resetRedPacketAnimation() {
			    this.$nextTick(() => {
			        // 创建一个新的空动画对象
			        var resetAnimation = uni.createAnimation({
			            duration: 0 // 设置时长为0，不执行任何动画
			        })
			        // 重置动画效果
			        resetAnimation.step()
			        this.openbrnanimation = resetAnimation.export() // 覆盖之前的动画
			    })
			},
			goMsgTop(){
				this.$Router.push({
					name:'msg_top',
					params: {
						chat_type:'private',
						chatTopMsg:this.chatTopMsg
					}
				})
			},
			//获取置顶的媒体消息
			mediaAttachments(item) {
				let mediaAttachments = item.content_text.filter(a => a.image || a.video);
				let getTexts = item.content_text.filter(e=>e.text)
				console.log(item);
				let text = getTexts.length ? getTexts[0].text.content : ''
				if(mediaAttachments.length){
					if(mediaAttachments[0].image){
						return {
							url:mediaAttachments[0].image.url,
							text
						}
					}else if(mediaAttachments[0].video){
						return {
							url:mediaAttachments[0].video.thumb_url,
							text
						}
					}else{
						return {
							url:null,
							text
						}
					}
				}else{
					return {
						url:null,
						text
					}
				}
			},
			onShowBackToTop(e){
				this.showBackToTop = e
				if(!this.showBackToTop){
					if(this.topMessageLastMsg){
						//已读回执
						msgSqlite.receipt({
							chat_type: this.chatInfo.chat_type,
							uuid: this.chatInfo.uuid,
							conversation_id: this.topMessageLastMsg.conversation_id,
							msg_id: this.topMessageLastMsg.msg_id
						}, false)
						this.topMessageNum = 0
						this.topMessageLastMsg = null
					}
				}
			}, 
			fangda() {
				this.fixed = !this.fixed
			},
			async getChatInfo() {
				//获取置顶消息
				let storagePrivateTop = uni.getStorageSync('chatPrivateTop') || {}
				if(!storagePrivateTop[this.user_info.user_id])storagePrivateTop[this.user_info.user_id] = {}
				console.log(storagePrivateTop[this.user_info.user_id]);
				this.$store.commit('setChatTopMsg', {
					data:storagePrivateTop[this.user_info.user_id][this.chatInfo.uuid],
					target_id:this.chatInfo.uuid
				})
				this.apiChatInfo()
			},
			async apiChatInfo() {
				//判断此次连接是否缓存了该群置顶消息
				if (!this.$store.getters.isOpenPrivate(this.chatInfo.uuid, 'msgTop')) {
					messageApi.getTopMsg(this.chatInfo.uuid,'private')
				}
			},
			//判断两个时间差是否大于5分钟
			compareTimeInterval(t1, t2, timer = 120000) {
				return t1 - t2 >= timer ? true : false;
			},
			//监听接受聊天信息
			onMessage(messages) {
				let lastMatchingMsg = null
				messages.forEach(message => {
					this.$refs.paging.addChatRecordData({
						id: this.indexList.length ? this.indexList[0].id + 1 : 1,
						...message
					},false);
					this.$forceUpdate()
					if (message.sender_id == this.chatInfo.uuid && message.msg_type != "sys_notice") {
						lastMatchingMsg = message
						//如果不在底部
						if(this.showBackToTop){
							this.topMessageNum++
							this.topMessageLastMsg = message
						}
					}
				})
				if (lastMatchingMsg  && !this.showBackToTop) {
					//这里需要发送消息回执
					//已读回执
					msgSqlite.receipt({
						chat_type: this.chatInfo.chat_type,
						uuid: this.chatInfo.uuid,
						conversation_id: lastMatchingMsg.conversation_id,
						msg_id: lastMatchingMsg.msg_id
					}, false)
				}
			},
			//操作
			onMessageControls({
				type,
				data
			}) {
				switch (type) {
					//撤回
					case 'withdraw':
						let index = this.indexList.findIndex(it => it.msg_id == data.msg_id)
						if (index != -1) {
							this.indexList.splice(index, 1)
						}
						break;
						//消息回执
					case 'receipt':
						//更新接收方的消息，也就是说谁发送的消息回执，那么就修改对方的消息
						this.indexList.map(item => {
							if (item.sender_id == data.target_id && item.msg_id <= data.msg_id) {
								item.msg_status = 'read'
							}
						})
						break;
					//修改消息
					case 'msg_edit':
						let editIndex = this.indexList.findIndex(it => it.msg_id == data.msg_id);
						if (editIndex !== -1) {
							this.$set(this.indexList[editIndex],'content_text',data.content_text)
						}
						if(this.chatTopMsg.msg_id == data.msg_id){
							this.$store.commit('editChatTopMsg',{
								content_text:data.content_text,
							})
						}
						break;
						//删除消息
					case 'del_msg':
						// 遍历 data.msg_ids 数组
						data.msg_ids.forEach(msgId => {
							let index = this.indexList.findIndex(it => it.msg_id ===
							msgId); // 找到 msg_id 在 indexList 中的索引
							if (index !== -1) {
								this.indexList.splice(index, 1); // 从 indexList 中删除该元素
							}
						});
						break;
						//删除消息
					case 'clearChat':
						this.$refs.paging.complete([]);
						break;
						//api发送消息返回,避免消息发送中返回，然后又进入更新不了消息
					case 'send':
						let sendIndex = this.indexList.findIndex(item => item.msg_id == data.local_id)
						if (data.server) {
							if (sendIndex != -1) {
								this.indexList[sendIndex].msg_id = data.server.msg_id
								this.indexList[sendIndex].msg_status = 'unread'
								this.indexList[sendIndex].content_text = JSON.parse(data.updata.content_text)
								this.indexList[sendIndex].conversation_id = data.server.conversation_id
							}
						} else {
							if (sendIndex != -1) {
								this.indexList[sendIndex].msg_status = 'failed'
							}
						}
						break;
					default:
						break;
				}
			},
			//聊天记录点击监听
			// onChatHistory(msg_id){
			// 	let index = this.indexList.findIndex(it => it.msg_id == msg_id)
			// 	if(index != -1){
			// 		this.$refs.paging.scrollIntoViewById('id'+msg_id)
			// 	}
			// },
			queryList(pageNo, pageSize) {
				const offset = this.indexList.length
				msgSqlite.getMsgList(this.chatInfo, {
					pageSize,
					offset
				}).then(results => {
					if (results) {
						results.map(result => {
							result.content_text = JSON.parse(result.content_text)
						});
						this.$refs.paging.complete(results);
						setTimeout(()=>{
							if(this.getShowIp && !this.getLastIpStr){
								
							}
						},200)
					}
				}).catch(e => {
					this.$refs.paging.complete(false);
				})
			},
			
			// 用户尝试隐藏键盘，此时如果表情面板在展示中，应当通知chatInputBar隐藏表情面板（如果不需要切换表情面板则不用写）
			hidedKeyboard() {
				this.$refs.chatinput && this.$refs.chatinput.hidedKeyboard();
			},
			//点击去详情
			godetails() {
				this.$Router.push({
					name: 'friend_chat_details',
					params: {
						user_id: this.chatInfo.uuid
					}
				})
			},
			//关闭编辑的消息
			closeMsg(){
				this.editMsgData = null
				this.$nextTick(()=>{
					this.$refs.chatinput && this.$refs.chatinput.setInput('')
				})
			},
			getTextContent(data) {
			    const textItem = data.find(item => item.text);
			    return textItem ? textItem.text.content : '';
			},
			//长按展示扩展按钮
			long(e) {
				let extendData = []
				if (e.item.msg_status != 'lodding' && e.item.msg_status != 'failed' && e.item.msg_type != 'r_p') {
					extendData = [{
							text: this.$t("chat.msg.feature.multipleChoice"),
							img: '/static/icon/duoxuan.svg',
						},
						{
							text: this.$t("chat.msg.feature.delete"),
							img: '/static/icon/shanchu.svg',
						},
					]
					if(e.item.msg_type == 'd_r'){
						extendData = [
							{
								text: this.$t("chat.msg.feature.delete"),
								img: '/static/icon/shanchu.svg',
							}
						]
					}else{
						extendData = [{
							text: this.$t("chat.msg.feature.quote"),
							img: '/static/icon/duoxuan.svg',
						},...extendData]
						let msgtext = this.chatTopMsg && this.chatTopMsg.msg_id == e.item.msg_id ? this.$t("chat.msg.feature.untop") : this.$t("chat.msg.feature.pinned")
						extendData = [{
							text: msgtext,
							img: '/static/icon/topmsg.svg',
						},...extendData]
					}
					if(e.item.sender_id == this.user_info.user_id && (e.item.msg_type == 'text' || e.item.msg_type == 'mixed')){
						extendData = [...extendData,{
							text: this.$t("common.edit"),
							img: '/static/icon/editMsg.svg',
						},]
					}
					switch (e.item.msg_type) {
						case 'image':
							extendData = [{
								text: this.$t("chat.msg.feature.share"),
								img: '/static/icon/zhuanfa.svg',
							}, {
								text: this.$t("chat.msg.feature.collect"),
								img: '/static/icon/shoucang.svg',
							}, ...extendData]
							break;
						case 'video':
							extendData = [{
								text: this.$t("chat.msg.feature.share"),
								img: '/static/icon/zhuanfa.svg',
							}, {
								text: this.$t("chat.msg.feature.collect"),
								img: '/static/icon/shoucang.svg',
							}, ...extendData]
							break;
						case 'audio':
							extendData = [{
								text: this.$t("chat.msg.feature.share"),
								img: '/static/icon/zhuanfa.svg',
							}, ...extendData]
							break;
						case 'mixed':
							const hasText = e.item.content_text.some(item => item.text !== undefined);
							if(hasText){
								extendData = [{
									text: this.$t("chat.msg.feature.copy"),
									img: '/static/icon/fuzhi.svg',
								},{
									text: this.$t("chat.msg.feature.share"),
									img: '/static/icon/zhuanfa.svg',
								}, {
									text: this.$t("chat.msg.feature.collect"),
									img: '/static/icon/shoucang.svg',
								}, ...extendData]
							}else{
								extendData = [{
									text: this.$t("chat.msg.feature.share"),
									img: '/static/icon/zhuanfa.svg',
								}, {
									text: this.$t("chat.msg.feature.collect"),
									img: '/static/icon/shoucang.svg',
								}, ...extendData]
							}
							
							break;
						case 'b_c':
							extendData = [{
								text: this.$t("chat.msg.feature.share"),
								img: '/static/icon/zhuanfa.svg',
							}, ...extendData]
							break;
						case 'text':
							extendData = [{
								text: this.$t("chat.msg.feature.copy"),
								img: '/static/icon/fuzhi.svg',
							}, {
								text: this.$t("chat.msg.feature.share"),
								img: '/static/icon/zhuanfa.svg',
							}, ...extendData]
							break;
						default:
							break;
					}
					let timeSever = e.item.create_time
					if (timeSever.toString().length === 10) {
						timeSever = timeSever * 1000
					}
					if (e.item.sender_id == this.user_info.user_id && !this.compareTimeInterval(Date.now(), timeSever, 120000)) {
						extendData.push({
							text: this.$t("chat.msg.feature.revocation"),
							img: '/static/icon/chehui.svg'
						})
					}
				} else if (e.item.msg_status == 'failed') {
					extendData = [{
						text: this.$t("chat.msg.feature.delete"),
						img: '/static/icon/shanchu.svg',
					}]
				}
				if (extendData.length) {
					let data = {
						x: e.x,
						y: e.y,
						place: e.place,
						width: e.width,
						popData: extendData
					}
					//长按的那个
					this.propItem = e.item
					this.$refs.extendPop.showPop(data)
				}
			},
			//扩展按钮
			async tapPopup(e) {
				switch (e.text) {
					case this.$t("common.edit"):
						this.referenceData = null
						this.editMsgData = JSON.parse(JSON.stringify(this.propItem)) 
						this.$nextTick(()=>{
							this.$refs.chatinput && this.$refs.chatinput.setInput(this.getTextContent(this.propItem.content_text))
						})
						break;
					case this.$t("chat.msg.feature.quote"):
						this.editMsgData = null
						this.referenceData = JSON.parse(JSON.stringify(this.propItem)) 
						break;
					case this.$t("chat.msg.feature.multipleChoice"):
						this.multipleChoice = {
							select: true,
							data: [this.propItem]
						}
						break;
					case this.$t("chat.msg.feature.collect"):
						let result = this.propItem.content_text.map(item => {
							if (item.image) {
								return {
									msg_type: "image",
									url: item.image.url,
									width: item.image.width,
									height: item.image.height,
									thumb_url: item.image.thumb_url,
									source_user_id: this.propItem.sender_id
								};
							} else if (item.video) {
								return {
									msg_type: "video",
									url: item.video.url,
									width: item.video.width,
									height: item.video.height,
									duration: item.video.duration,
									thumb_url: item.video.thumb_url,
									source_user_id: this.propItem.sender_id
								};
							}
						}).filter(item => item);

						let jsondata = {
							favorite_type: 'image_video',
							source_user_id: this.propItem.sender_id,
							content: result
						}
						console.log(favoritesApi)
						await favoritesApi.add(jsondata)

						break;
					case this.$t("chat.msg.feature.share"):
						this.$Router.push({
							name: 'business_share',
							params: {
								type: 'share',
								chatdata: [this.propItem]
							}
						});
						break;
					case this.$t("chat.msg.feature.copy"):
						const textObject = this.propItem.content_text.find(item => item.text);
						if(textObject){
							uni.setClipboardData({
								data: textObject.text.content,
								showToast: false,
								success: () => {
									uni.showToast({
										icon: 'none',
										title: this.$t("tost.title.copyOk")
									})
								}
							});
						}
						break;
					case this.$t("chat.msg.feature.revocation"):
						try {
							let apires = await messageApi.withdraw(this.propItem.msg_id, this.chatInfo.uuid, this
								.chatInfo.chat_type)
							if (apires) {
								await msgSqlite.delMsg(this.propItem.msg_id, this.chatInfo.chat_type)
								let index = this.indexList.findIndex(it => it.msg_id == this.propItem.msg_id)
								if (index != -1) {
									this.indexList.splice(index, 1)
								}
							}
						} catch (e) {}
						break;
					case this.$t("chat.msg.feature.pinned"):
						try{
							let apires = await messageApi.topMsg({
								target_id:this.chatInfo.uuid,
								msg_id:this.propItem.msg_id,
								is_top:1
							},'private')
							console.log(apires);
						}catch (e) {
							console.log(e);
						}
						
						break;
					case this.$t("chat.msg.feature.untop"):
						try{
							let apires = await messageApi.topMsg({
								target_id:this.chatInfo.uuid,
								msg_id:this.propItem.msg_id,
								is_top:0
							},'private')
							console.log(apires);
						}catch (e) {
							console.log(e);
						}
						break;
					case this.$t("chat.msg.feature.delete"):
						console.log(this.propItem);
						if (this.propItem.msg_status == 'failed') {
							await msgSqlite.delMsg([this.propItem.msg_id], this.chatInfo.chat_type)
							//删除完了尝试更新会话
							this.$store.dispatch('delMsgSession', {
								chat_id: this.chatInfo.uuid,
								msg_ids: [this.propItem.msg_id],
								chat_type: this.chatInfo.chat_type
							})
							// 遍历 data.msg_ids 数组
							let index = this.indexList.findIndex(it => it.msg_id === this.propItem.msg_id);
							if (index !== -1) {
								this.indexList.splice(index, 1); // 从 indexList 中删除该元素
							}
						} else {
							this.delJson = {
									check: [],
									msg_ids: [this.propItem.msg_id],
									conversation_id: this.propItem.conversation_id
								},
								this.$refs.clDelMsg.show({
									confirmText: this.$t("common.deleteText"),
									cancelText: this.$t("common.cancelText"),
									confirm: async (e) => {
										await this.delmsg()
										e.showModel = false
										this.delJson = {
											check: [],
											msg_ids: [],
											conversation_id: 0
										}
									},
									close: () => {
										this.delJson = {
											check: [],
											msg_ids: [],
											conversation_id: 0
										}
									}
								})
						}
						break;
					default:
						break;
				}
			},
			//批量操作
			batchControls(type) {
				switch (type) {
					case 'delete':
						this.delJson = {
								check: [],
								msg_ids: this.multipleChoice.data.map(item => item.msg_id),
								conversation_id: this.propItem.conversation_id
							},
							this.$refs.clDelMsg.show({
								confirmText: this.$t("common.deleteText"),
								cancelText: this.$t("common.cancelText"),
								confirm: async (e) => {
									await this.delmsg()
									e.showModel = false
									this.delJson = {
										check: [],
										msg_ids: [],
										conversation_id: 0
									}
									this.multipleChoice.select = false
								},
								close: () => {
									this.delJson = {
										check: [],
										msg_ids: [],
										conversation_id: 0
									}
								}
							})
						break;
					case "share":
						console.log(this.multipleChoice.data)
						this.$Router.push({
							name: 'business_share',
							params: {
								type: 'share',
								chatdata: this.multipleChoice.data
							}
						});
						this.multipleChoice.select = false
						break
					default:
						break;
				}
			},
			//删除消息的操作
			async delmsg() {
				try {
					await messageApi.delmsg({
						target_id: this.chatInfo.uuid,
						msg_ids: this.delJson.msg_ids,
						del_msg_type: this.delJson.check.length ? 2 : 1,
						conversation_id: this.delJson.conversation_id
					}, this.chatInfo.chat_type)
					await msgSqlite.delMsg(this.delJson.msg_ids, this.chatInfo.chat_type)
					//删除完了尝试更新会话
					this.$store.dispatch('delMsgSession', {
						chat_id: this.chatInfo.uuid,
						msg_ids: this.delJson.msg_ids,
						chat_type: this.chatInfo.chat_type
					})
					// 遍历 data.msg_ids 数组
					this.delJson.msg_ids.forEach(msgId => {
						let index = this.indexList.findIndex(it => it.msg_id ===
						msgId); // 找到 msg_id 在 indexList 中的索引
						if (index !== -1) {
							this.indexList.splice(index, 1); // 从 indexList 中删除该元素
						}
					});
				} catch (e) {
					console.log(e);
				}
			},
			//名片发送监听
			onCallingCard(item) {
				this.cardInfo = item
				this.$refs.clCard.show({
					confirmText: this.$t("common.sendConfirm"),
					cancelText: this.$t("common.cancelText"),
					confirm: (e) => {
						e.showModel = false
						let wy_id = uuidv4()
						let msgdata = [{
							b_c: {
								card_user_id: item.chat_id,
								nick_name: item.nick_name,
								avatar_url: item.chat_face,
								type: item.chat_type,
							}
						}]
						this.sendLocal(wy_id, 'b_c', msgdata)
						this.cardInfo = null
					},
					close: () => {
						this.cardInfo = null
					}
				})
			},
			//音频
			record(e) {
				if (!e.cancel) {
					let wy_id = uuidv4()
					let msgdata = [{
						audio: {
							url: e.result,
							duration: e.duration,
							msg_order: 0
						}
					}]
					this.sendLocal(wy_id, 'audio', msgdata)
				}
			},
			//拍照录像返回
			async cameracall(data) {
				console.log(data);
				let wy_id = uuidv4()
				// 处理图片和视频
				let msgdata = [];
				for (let item of data.file) {
					console.log(item);
					if (item.type == 'image') {
						let imageInfo = await file.getImageInfo(item.url)
						msgdata.push({
							image: {
								url: item.url,
								thumb_url: item.url,
								width: imageInfo.width,
								height: imageInfo.height,
								msg_order: msgdata.length
							}
						})
					} else if (item.type == 'video') {
						let videoInfo = await file.getVideoInfo(item.url);
						msgdata.push({
							video: {
								url: item.url,
								thumb_url: item.thumbUrl || item.thumb_url,
								width: videoInfo.width,
								height: videoInfo.height,
								msg_order: msgdata.length,
								duration: Math.ceil(videoInfo.duration), // 假设视频时长为20秒
							}
						})
					}
				}
				if (data.text) {
					msgdata.push({
						text: {
							content: data.text,
							msg_order: msgdata.length
						}
					})
				}
				let type = 'mixed'
				//如果
				if (msgdata.length == 1) {
					type = Object.keys(msgdata[0])[0]
				}
				console.log(msgdata);
				if (msgdata.length) this.sendLocal(wy_id, type, msgdata)
			},
			//发送
			async changeIn({
				text,
				html,
				length
			}) {
				if(this.editMsgData){
					let updataMsg = JSON.parse(JSON.stringify(this.editMsgData))
					const textItem = updataMsg.content_text.find(item => item.text);
					if (textItem) {
						textItem.text.content = text; // 更新内容
					} else {
						updataMsg.content_text.push({ // 添加新的文本对象
							text: {
								content: text,
								msg_order: updataMsg.content_text.length // 根据当前长度设置 msg_order
							}
						});
					}
					messageApi.msgEdit('private',this.chatInfo.uuid,{
						...this.editMsgData,
						content_text:updataMsg.content_text
					})
					this.editMsgData = null
				}else{
					let wy_id = uuidv4()
					let msgdata = [{
						text: {
							content: text,
							msg_order: 0
						}
					}]
					this.sendLocal(wy_id, 'text', msgdata)
				}
			},
			//重新发送
			repeater(item) {
				// this.sendMsg(item.msg_id, item.msg_type, item.content_text)
				this.repeaterSend(item)
			},
			//失败重新发送操作
			async repeaterSend(item) {
				let index = this.indexList.findIndex(it => it.msg_id == item.msg_id)
				if (index != -1) {
					let newdata = JSON.parse(JSON.stringify(this.indexList[index]))
					newdata.msg_status = 'lodding'
					newdata.create_time = Date.now()
					this.indexList.splice(index, 1)
					//模拟id
					this.$refs.paging.addChatRecordData({
						id: this.indexList.length ? this.indexList[0].id + 1 : 1,
						...newdata
					},true);
					await msgSqlite.delMsg(newdata.msg_id, this.chatInfo.chat_type)
					await msgSqlite.newMsg(newdata)
					this.sendMsg(newdata.msg_id, newdata.msg_type, newdata.content_text)
				}
			},
			//添加本地数据库，并调用发送接口
			async sendLocal(wy_id, type, msgdata) {
				//先添加数据库再发送
				try {
					let n_msg = {
						msg_id: wy_id,
						local_id: wy_id,
						sender_id: this.user_info.user_id,
						target_id: this.chatInfo.uuid,
						create_time: Date.now(),
						msg_type: type,
						chat_type: this.chatInfo.chat_type,
						msg_status: 'lodding',
						content_text: msgdata,
						conversation_id: 0
					}
					if(this.referenceData){
						n_msg.ref_msg_id = this.referenceData.msg_id
						this.referenceData = null
					}
					this.$refs.paging.addChatRecordData({
						id: this.indexList.length ? this.indexList[0].id + 1 : 1,
						...n_msg
					},true);
					await msgSqlite.newMsg(n_msg)
					this.sendMsg(wy_id, type, msgdata,n_msg.ref_msg_id)
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						icon: 'none',
						title: e
					})
				}
			},
			//发送接口执行
			async sendMsg(wy_id, type, msgdata,ref_msg_id) {
				try {
					messageApi.send({
						target_id: this.chatInfo.uuid,
						local_id: wy_id,
						ref_msg_id:ref_msg_id,
						msg_type: type,
						content_text: JSON.parse(JSON.stringify(msgdata))
					}, this.chatInfo.chat_type)
				} catch (e) {
					console.log(e);
				}
			},
			async directsend({msg_type,content_text}){
				try {
					let wy_id = uuidv4();
					let resmsg = await messageApi.directsend({
						target_id: this.chatInfo.uuid,
						local_id: wy_id,
						msg_type: msg_type,
						content_text: content_text
					}, this.chatInfo.chat_type);
				} catch (e) {
					console.log(e);
				}
			}
		}
	};
</script>
<style>
	page {
		/* 必须的样式，这是页面背景色为透明色 */
		background: rgba(18, 19, 37, 0.6);
	}
</style>
<style scoped lang="scss">
	.typetag {
		white-space: nowrap;
		font-size: 20rpx;
		color: #FFFFFF;
		padding: 0 10rpx;
		height: 28rpx;
		margin-left: 10rpx;
		line-height: 28rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: #FF7676;
	}
	.editMsgview{
		width: 750rpx;
		background-color: #0c0d1a;
		border-bottom: 1rpx solid #121325;
		padding: 10rpx 30rpx;
		overflow: hidden;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&__title{
			color: #1c93cf;
			font-size: 26rpx;
		}
	}
	.navtitleview {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 15px;

		&__memeber {
			font-size: 26rpx;
			color: #61626e;
		}
	}

	.listview {
		&__timeview {
			display: flex;
			justify-content: center;
			padding: 0 0 20rpx;

			&__time {
				font-size: 22rpx;
				color: #5B5A63;
				line-height: 28rpx;
			}
		}
	}

	.cardView {
		width: 100%;
		text-align: left;

		&__title {
			font-size: 28rpx;
			font-weight: bold;
		}

		&__top {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			&__name {
				margin-left: 10rpx;
				font-size: 26rpx;
			}
		}

		&__content {
			margin-top: 30rpx;
			padding-left: 15rpx;

			&__text {
				font-size: 26rpx;
			}
		}
	}

	.delView {
		width: 100%;
		text-align: left;
		display: flex;
		flex-direction: column;

		&__title {
			font-size: 28rpx;
			font-weight: bold;
		}

		&__content {
			margin: 20rpx 0;
			font-size: 26rpx;
		}
	}
</style>